<template>
    <div id="tbing"
         style="width:95%;height:90%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'twobing',
  props: ['twobing'],
  data () {
    return {
      // 页面查询数据
      data: [],
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {}
    }
  },
  mounted () {
    setTimeout(() => {
      this.hadleGetFilesListApi()
    })
  },
  methods: {
    hadleGetFilesListApi (x, y) {
      const option = {
        title: [
          {
            text: '分类评价',
            textStyle: {
              color: 'rgb(30,30,30)',
              fontSize: 20,
              fontWeight:550
            },
            x: 'left'
          },
          {
            subtext: '本周',
            left: '28%',
            top: '85%',
            subtextStyle: {
              color: '#b5bac3',
              fontSize: 20
            },
            textAlign: 'center'
          },
          {
            subtext: '今日',
            left: '65.5%',
            top: '85%',
            textAlign: 'center',
            subtextStyle: {
              color: '#b5bac3',
              fontSize: 20
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        legend: {
          textStyle: {
            // 图例文字的样式
            color: '#b5bac3',
            fontSize: 16
          },
          right: 10,
        //   icon: 'roundRect', // 这个字段控制形状类型包括circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 30, // 设置宽度
          itemHeight: 12, // 设置高度
          itemGap: 40 // 设置间距
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        // color: ['#0f86e8', '#23be7a', 'yellow'],
        color: ['rgb(61,164,246)', 'rgb(3,201,178)', 'rgb(245,148,57)'],
        series: [
          {
            type: 'pie',
            name: '本周',
            radius: '50%',
            center: ['30.5%', '50%'],
            // roseType: 'radius',
            radius: ['20%', '40%'],
            selectedMode: 'single',
            labelLine: {
            //   normal: {
                length: 10
            //   }
            },
            label: {
              normal: {
                formatter: '{b}:{c}({d}%)',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            data: x,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            type: 'pie',
            name: '今日',
            radius: ['20%', '40%'],
            center: ['65.5%', '50%'],
             roseType: 'radius',
            selectedMode: 'single',
            labelLine: {
            //   normal: {
                length: 10
            //   }
            },
            label: {
              normal: {
                formatter: '{b}:{c}({d}%)',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            data: y,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('tbing'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  watch: {
    twobing (newval, oldval) {
      var data1 = []
      var data2 = []
      var a = {}
      a.name = '好'
      a.value = newval.excellentWeek
      data1.push(a)

      var b = {}
      b.name = '中'
      b.value = newval.midRangeWeek
      data1.push(b)

      var c = {}
      c.name = '差'
      c.value = newval.differenceWeek
      data1.push(c)

      var d = {}
      d.name = '好'
      d.value = newval.excellentToday
      data2.push(d)
      var e = {}
      e.name = '中'
      e.value = newval.midRangeToday
      data2.push(e)
      var f = {}
      f.name = '差'
      f.value = newval.differenceToday
      data2.push(f)

      this.hadleGetFilesListApi(data1, data2)
    }
  }
}
</script>
